<template>
	<view>
		<view class="col-100" style="position: fixed;top: 0;z-index: 99;">
			<fui-tabs :tabs="tabs" @change="changeCurrentTab" sliderBackground="#26B5AE" selectedColor="#26B5AE" center/>
		</view>
		<view style="height: 100rpx;"></view>
		<!-- 内容切换 -->
		<view class="content padding-h30" v-for="(item,index) in applicationList.data" :key="index">
			<view class="cc-bg-white padding-20  margin-v30 border-radius-20">
					<view class="cc-rows cc-space-between">
						<text class="cc-color-888 cc-size-28" style="margin:10rpx 40rpx 20rpx 0;">应用名称</text>
						<text class="cc-size-28" style="margin-top:10rpx;">{{item.name}}</text>
					</view>
					<view class="cc-rows cc-space-between">
						<text class="cc-color-888 cc-size-28" style="margin:10rpx 40rpx 20rpx 0;">appid</text>
						<text class="cc-size-28" style="margin-top:10rpx;">{{item.appId}}</text>
					</view>
					<view class="cc-rows cc-space-between">
						<text class="cc-color-888 cc-size-28" style="margin:10rpx 40rpx 20rpx 0;">服务节点</text>
						<text class="cc-size-28" style="margin-top:10rpx;">{{item.node.name}}</text>
					</view>
					<view class="cc-rows cc-space-between">
						<text class="cc-color-888 cc-size-28" style="margin:10rpx 40rpx 20rpx 0;">设备数量</text>
						<text class="cc-size-28" style="margin-top:10rpx;">{{item.total_device}}</text>
					</view>
					<view class="cc-rows cc-space-between">
						<text class="cc-color-888 cc-size-28" style="margin:10rpx 40rpx 20rpx 0;">ip</text>
						<text class="cc-size-28" style="margin-top:10rpx;">{{item.node.node_ip}}</text>
					</view>
					<view class="cc-rows cc-space-between">
					</view>
			</view>
		</view>
		<!-- 缺省页 -->
		<!-- <fui-empty src="../../static/image/404tp.png" isFixed color="#999" title="暂无数据" v-if="!applicationList.data.length" /> -->
		<!--加载更多-->
		<fui-loading type="row" :isFixed="false" class="margin-30" v-if="showloadmore"/>
		<view class="showloadall" v-if="showloadall && applicationList.data.length>0" >加载完毕</view>
	</view>
</template>

<script>
	import {ref} from 'vue'
	export default {
		setup(){
			const applicationList = ref([])
			const tabsIndex = ref(0)
			const showloadall = ref(false)//是否显示加载更多
			const showloadmore = ref(false)//全部加载完毕
			const tabs = ref([{name:'应用列表',sign:'all'},{name:'新增应用',sign:'wait'},{name:'应用设置'}])
			
			return {
				applicationList,tabs
			}
		},
		onLoad() {
			this.getApplicationList()
		},
		onShow() {
		},
		onReachBottom() {//加载更多
			 if(this.showloadall==false){//没有加载完毕执行
				 this.page=this.page+1;
				 this.getApplicationList();
			 }
		},
		methods: {
			// 更改当前Tab页
			changeCurrentTab(e) {
				this.tabsIndex = e;
				this.page=1;
				this.type = e.sign;
				this.getApplicationList();
			},
			getApplicationList(){
				let that = this;
				uni.publicJs.post('/auth/app/list',
					{page: this.page,per_page:this.per_page},
					res=>{
						console.log(res)
						this.applicationList = res.data
						if (that.page == 1) {
							that.applicationList = res.data;
						} else {
							that.applicationList = [...that.applicationList, ...res.data]
						}
						that.showloadmore = false;
						if (res.data.length < that.per_page) {
							that.showloadall = true;
						}
					}
				)
			}
		},
		
	}
</script>

<style>
</style>
